<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link href="swicthButton.css" rel="stylesheet">
    <link href="swicthButton2.css" rel="stylesheet">
    <link href="Wechat.css" rel="stylesheet">
</head>
<body>
<div id="wechat">
    <div style="height: 1500px;background: linear-gradient(to top, #2e2e2e,#2e2e2e,#2e2e2e,#1100ff,#c800ff,mediumvioletred,#c800ff,#2e2e2e,#2e2e2e,#2e2e2e,#2e2e2e,#2e2e2e,#c800ff);width:80px;position: relative;justify-content: space-between; border-radius: 30px 0 0 30px ;float: left;overflow: hidden;">
        <div><img alt='' src="imageFile/img.png" style="width: 60px;height: 60px;display: flex;
            align-items: center;
            justify-content: center;
            padding: 55px 0 0 0 ;
            margin:10px;">
            <img alt='' class="broadside_img" src="imageFile/img_1.png">
            <img alt='' class="broadside_img" src="imageFile/img_2.png">
            <img alt='' class="broadside_img" src="imageFile/img_3.png">
            <img alt='' class="broadside_img" src="imageFile/img_4.png">
            <img alt='' class="broadside_img" src="imageFile/img_5.png">
            <img alt='' class="broadside_img" src="imageFile/img_6.png">

        </div>
        <div style="padding-top:700px;">
            <img alt='' class="broadside_img" src="imageFile/img_7.png">
            <img alt='' class="broadside_img" src="imageFile/img_8.png">
            <img alt='' class="broadside_img" src="imageFile/img_9.png">
        </div>
    </div>
    <div style="height: 1500px;background: #e6e5e5;width:470px;position: relative;float: left;overflow:hidden;overflow-y: auto;">
        <div style="height: 100px;background: #f5f5f5;display: flex;align-content: center;align-items: center;border-right: 1px solid #dbc8c8;position: fixed;width: 469px">
            <input placeholder="搜索"
                   style="display: flex;border:10px;height: 35px;margin: 30px 10px 30px 15px;width: 300px;border-radius: 10px;border: transparent;font-size: 22px;padding:10px 40px;background: #e0e0e0 url('imageFile/img_11.png') no-repeat left 10px ;color:#7b7b7b;text-indent:10px;font-weight: bolder;">
            <button style="height: 50px;width: 50px;border-radius: 10px;background: #e0e0e0;border: transparent;">
                <img alt='' src="imageFile/img_10.png" style="padding: 0;margin: 0">
            </button>
        </div>
        <div v-for="(item,index) in contacts" :key="index" style="">
            <ul :id=index :class=item.contactsCSS @click="onclick(item)">
                <li style="display: flex;align-items: center;justify-content: start;padding-top:13px">
                    <img :src="item.head_portrait" alt='' style="width:50px">
                    <div style="display: flex;flex-direction: column;padding: 0 10px">
            <span style="font-size: 26px;padding-bottom: 8px">
                {{ item.name }}
            </span>
                        <span style="font-size:20px;color:gray ;font-family:Arial, sans-serif">
               {{ item.preview }}
            </span>
                    </div>
                </li>
            </ul>
        </div>
        <div v-for="(item,index) in broadsideData" :key="index">
            <ul :id=index :class=item.broadsideCSS @click="onclick(item)">
                <li style="display: flex;align-items: center;justify-content: start;padding-top:13px">
                    <img alt='' src="imageFile/img_18.png" style="width:50px">
                    <div style="display: flex;flex-direction: column;padding: 0 10px">
                            <span style="font-size: 26px;padding-bottom: 8px">
                                {{ item.name }}
                            </span>
                        <span style="font-size:20px;color:gray ;font-family:Arial, sans-serif">
                               {{ item.preview }}
                            </span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div style="height: 1500px;width:1810px;position: relative;float: left;">
        <div style="height: 100px;background: #f3f3f3 url('imageFile/img_21.png') no-repeat center -65px;display: flex;font-size: 35px;font-weight: bolder;align-items: center;justify-content: start;padding-left: 30px;">
            <span style="position: absolute;float: right;margin-left: 1720px;margin-bottom: 50px">
            <img alt='' onclick="window.close()" src="imageFile/img_17.png" style="width: 60px;"></span>
            <span style="background: -webkit-linear-gradient(315deg,#fd80bf 25%,#302b29);padding-top: 20px;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;color:transparent;font-weight:bolder;">
   {{ show_title }}
</span>
        </div>
        <div :class="broadsideRightCSS" style="overflow: hidden;">
            <button style="z-index: 1;position:absolute;float: right;height: 90px;right:0;top:450px;font-weight:bolder;border-radius:10px 0 0 10px;background: linear-gradient(to top,rgba(187,38,74,0.76), rgba(162,40,41,0.65),rgba(181,223,203,0.65),rgba(244,232,209,0.62));"
                    @click="broadsideRightCSSF()">
                {{ RightFoldText }}
            </button>
            <div style="text-align: center;display: flex;position: relative;width: 60px;align-items: center;align-content: center;justify-content: center;margin-left: 50px;">
                <div style="flex-direction: column;margin-left:60px;display: flex;align-content: center;justify-content: center;align-items: center;margin-top: -30px">
                    <img :src=target_item.head_portrait alt="" style="width: 90px;margin-left: 50px;">
                    <span style="width: 80px;flex-direction: row;text-align: center;margin-left: 30%;margin-top: 15px">{{
                            target_item.name
                        }}</span>
                </div>
                <div style="flex-direction: column;margin-left: 10px;margin-bottom: 40px">
                    <img alt="" src="imageFile/img_36.png">
                    <span style="width: 40px;">添加</span>
                </div>
            </div>
            <div style="border-top:#eaeaea solid 1px;border-bottom:#eaeaea solid 1px;width: 90%;position:relative;left: 5%;min-width: 500px">
                <button style="width:95%;height: 60px;text-align: left;font-size: 30px;background-color: rgba(253,253,253,0.34);border: transparent;margin-top: 20px;margin-left: 20px;margin-bottom: 20px;">
                    聊天记录
                    <span style="float: right">
                ＞
            </span>
                </button>
            </div>
            <div style="border-top:#eaeaea solid 1px;border-bottom:#eaeaea solid 1px;width: 90%;position: relative;left: 5%;min-width: 500px">
                <button style="width:95%;height: 60px;text-align: left;font-size: 30px;background-color: rgba(253,253,253,0.34);border: transparent;margin-top: 30px;margin-left: 20px;margin-bottom: 20px;">
                    <span style="float:left;display: flex;margin-top:10px;align-items: center;justify-content: center;width: 150px">消息免打扰</span>
                    <span style="float: right ">
                        <div class="toggle-wrapper">
  <input class="toggle-checkbox" type="checkbox">
  <div class="toggle-container">
    <div class="toggle-button">
      <div class="toggle-button-circles-container">
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
        <div class="toggle-button-circle"></div>
      </div>
    </div>
  </div>
</div>

            </span>
                </button>
                <button style="width:95%;height: 60px;text-align: left;font-size: 30px;background-color: rgba(253,253,253,0.34);border: transparent;margin-top: 10px;margin-left: 20px;margin-bottom: 20px;">
                    <span style="float:left;display: flex;margin-top:10px;align-items: start;justify-content: start;width: 150px">置顶聊天</span>
                    <span class="checkbox-wrapper-10" style="float: right">
  <input id="cb5" checked="" class="tgl tgl-flip" type="checkbox">
  <label class="tgl-btn" data-tg-off="Off" data-tg-on="On" for="cb5"></label>
            </span>
                </button>
            </div>
        </div>
        <div v-if="target_item.type==='broadside'"
             style="border-radius: 0 0 30px 0;background: linear-gradient(to top,#3e0376, rebeccapurple,#ebebeb,#ebebeb), url('imageFile/img_24.png');height:1400px;display: flex;justify-content: center;align-items: center;overflow:hidden;overflow-y:auto">
            <div style="height: 100%;width: 80%">
                <div style="margin-top: 20px;color:gray;font-size: 22px ">常读的订阅号</div>
                <div v-for="index in cycle_index3" :key="index" style="display: flex;float: left">
                    <div style="background: #e9e9e9;width: 90px;height: 60px;margin: 30px;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column">
                        <img :src="target_item.subscription_data_representative_img" alt=''
                             style="width: 80px;border-radius: 25px">
                        <span style="text-align: center;font-size: 20px">{{ target_item.name }}</span>
                    </div>
                </div>
                <div style="margin-top: 200px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                    <div v-for="index in cycle_index" style="display: flex">
                        <div v-for="index2 in cycle_index2">
                            <div style="width: 500px;height: 350px;background: #fdfdfd;border:1px solid transparent;border-radius:20px;margin:10px 10px;display: flex;justify-content: start;align-items: center;">
                                <div>
                                    <div><span
                                            style="margin: 5px 10px 10px 30px;float: left;font-size: 20px;color: #3a68d6">
                                                    <span style="display: flex;align-items: center;margin-top: 40px">
                                                    <img :src="target_item.subscription_data_representative_img" alt=''
                                                         style="width: 40px;border-radius: 25px;margin-right: 20px">
                                                    {{ target_item.subscription_data_name }}
                                                    </span>
                                                </span>
                                        <span style="margin: 55px 26px 0 0;float: right;color:gray">
                                                    41分钟前
                                                </span>
                                    </div>
                                    <img :src="target_item.subscription_data_img"
                                         alt=""
                                         style="margin: 0;padding: 0; width: 100%; height: 100%; object-fit: cover; transition: 1s;;min-width: 500px;max-height: 200px;">
                                    <span style="display: flex;margin:10px 0 60px 20px;font-size: 23px">
                                              {{ target_item.subscription_data_text }}
                                            </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="target_item.type==='contacts'"
             style="background: url(imageFile/img_35.png) no-repeat 12vh ;background-size: 80%;height:1400px;overflow:hidden;overflow-y: auto;">
            <div :class=divForContact id="scroll">
                <!--            聊天窗口-->
                <div :class=empty>
                    不能发送空消息 您输入的内容为空
                </div>
                <!-- 遍历messageTarget数组，展示每个聊天信息项 -->
                <div v-for="(item,index) in messageTarget" :key="index">
                    <!-- 如果是对象类型的消息 -->
                    <div v-if="item.type==='object'" :class="item.div1Class">
                        <!-- 显示对方的头像和消息 -->
                        <img :class="item.imgClass" :src="item.headImage" alt=''>
                        <span :class="item.spanClass">
                <span :class="item.span2Class">{{ item.messageText }}</span>
            </span>
                        <!-- 显示消息时间戳 -->
                        <span style="margin:30px 0 0 10px; font-size: 20px;font-weight: bolder;
            color: #ff9900; ">{{ item.timestamp }}</span>
                    </div>
                    <!-- 如果是自己的消息 -->
                    <div v-if="item.type==='oneself'" :class="item.div1Class">
                        <!-- 显示自己的消息时间戳 -->
                        <span style="margin:30px 10px 0 0; font-size: 20px;font-weight: bolder;
            color: #00e2ff; ">{{ item.timestamp }}</span>
                        <!-- 显示自己的消息和头像 -->
                        <span :class="item.spanClass">
                <span :class="item.span2Class">{{ item.messageText }}</span>
            </span>
                        <img :class="item.imgClass" :src="item.headImage" alt=''>
                    </div>
                </div>
            </div>
            <!-- 输入区域容器，通过:class绑定inputArea的值来控制样式 -->
            <div :class=inputArea>
                <!-- 图片图标栏，用于展示一系列图标 -->
                <div style="display: flex;align-items: center;justify-content: center;margin-left: 15px">
                    <img alt='' src="imageFile/img_27.png" style="width:40px;margin-right: 20px">
                    <img alt='' src="imageFile/img_28.png" style="width:40px;margin-right: 20px">
                    <img alt='' src="imageFile/img_29.png" style="width:40px;margin-right: 20px">
                    <img alt='' src="imageFile/img_30.png" style="width:40px;margin-right: 20px">
                    <img alt='' src="imageFile/img_31.png" style="width:40px;margin-right: 20px">
                    <img alt='' src="imageFile/img_32.png" style="width:45px;margin-right: 20px">
                    <img alt='' src="imageFile/img_33.png" style="width:45px;margin-right: 20px">
                </div>

                <!-- 文本输入区，用于输入消息，通过v-model绑定inputMessage的值 -->
                <textarea
                        v-model="inputMessage"
                        style="background: transparent;width: 98%;height: 220px;font-size:35px;position:absolute;top:50px;border: transparent;display: flex;outline:none;justify-content:start;align-content:start;margin-left: 20px"
                        @keydown.enter.prevent="sendMessage(messageTarget)"></textarea>

                <!-- 发送按钮，点击或按Enter键即可发送消息 -->
                <button style="background: linear-gradient(to right,rgba(187,38,74,0.76), rgba(162,40,41,0.65),rgba(181,223,203,0.65),rgba(244,232,209,0.62));
    width: 250px;height: 45px;position: absolute;left:450px;border-radius: 8px;font-size: 25px;display: flex;align-content: baseline;justify-content: center;align-items: center"><span
                        style="background: -webkit-linear-gradient(315deg,#fdfdfd 25%,#b9384f,#b9384f);-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;color:transparent;font-weight:bolder;" @click="sendMessage(messageTarget)">点我 或 Enter 发送</span>
                </button>
                <div v-if="this.target_item.name === '樱桃'">
                    <select v-model=selectedLanguage style="margin-left: 320px ;background: linear-gradient(to right,rgba(253,233,2,0.76), rgba(119,212,20,0.65),rgba(181,223,203,0.65),rgba(244,232,209,0.62));
            width: fit-content;height: 45px;position: absolute;left:850px;border-radius: 0 0 8px 8px;border-top:transparent;font-size: 35px;display: flex;align-content: baseline;justify-content: center;align-items: center">
                        <option value="zh-CHS,en">中译英</option>
                        <option value="zh-CHS,ja">中译日</option>
                        <option value="zh-CHS,ko">中译韩</option>
                        <option value="en,zh-CHS">英译中</option>
                        <option value="en,ja">英译日</option>
                        <option value="en,ko">英译韩</option>
                        <option value="ja,zh-CHS">日译中</option>
                        <option value="ja,en">日译英</option>
                        <option value="ja,ko">日译韩</option>
                        <option value="ko,zh-CHS">韩译中</option>
                        <option value="ko,en">韩译英</option>
                        <option value="ko,ja">韩译日</option>
                    </select></div>
                <!-- 折叠按钮，用于隐藏/显示输入区域 -->
                <button style="background: linear-gradient(to right,rgba(253,233,2,0.76), rgba(119,212,20,0.65),rgba(181,223,203,0.65),rgba(244,232,209,0.62));
    width: 120px;height: 45px;position: absolute;left:850px;border-radius: 0 0 8px 8px;border-top:transparent;font-size: 35px;display: flex;align-content: baseline;justify-content: center;align-items: center"
                        @click="fold()"><span
                        style="background: -webkit-linear-gradient(315deg,#db4f4f 25%,#b9384f,#b9384f);-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;color:transparent;font-weight:bolder;"
                >{{ foldText }}</span>
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    let wechat = new Vue({
        my_melo: this.my_melo, kuromi: this.kuromi, cherries: this.cherries, inputMessage: this.inputMessage,
        el: '#wechat', contacts: this.contacts,
        data: {
            divForContact: "divForContact",
            contacts: [
                {
                    type: 'contacts',
                    head_portrait: 'imageFile/img_24.png',
                    contactsCSS: 'broadside',
                    id: 'kuromi',
                    name: '酷洛米',
                    preview: ''
                },

                {
                    type: 'contacts',
                    head_portrait: 'imageFile/img_24.png',
                    contactsCSS: 'broadside',
                    name: '酷洛米', id: 'kuromi',
                    preview: ''
                },
                {
                    type: 'contacts',
                    head_portrait: 'imageFile/img_25.png',
                    contactsCSS: 'broadside',
                    name: '美乐蒂',
                    id: 'my_melo',
                    preview: ''
                },
                {
                    type: 'contacts',
                    head_portrait: 'imageFile/img.png',
                    contactsCSS: 'broadside',
                    id: 'cherries',
                    name: '樱桃',
                    preview: ''
                },

            ],
            broadsideData: [
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'img_1.png',
                    subscription_data_name: '订阅号 ',
                    target: 'ture',
                    name: '订阅号  ',
                    preview: '国家数据局 2024年3月份居民消费...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '中华人民共和国国防部',
                    target: 'ture',
                    name: '国家安全',
                    preview: '国防部：祖国统一 台湾当归，解放军...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'img_2.png',
                    subscription_data_name: '股市快讯',
                    target: 'ture',
                    name: '股市快讯',
                    preview: '最新股市动态与行情分析，投资需谨...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'img_3.png',
                    subscription_data_name: '健康养生',
                    target: 'ture',
                    name: '健康养生',
                    preview: '健康生活方式与养生秘诀，健康每一天...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'img_4.png',
                    subscription_data_name: '时尚潮流',
                    target: 'ture',
                    name: '时尚潮流',
                    preview: '最新时尚资讯与潮流趋势，引领时尚...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'img_5.png',
                    subscription_data_name: '体育新闻',
                    target: 'ture',
                    name: '体育新闻',
                    preview: '体育赛事报道与精彩瞬间，热血激情...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '美食天地',
                    target: 'ture',
                    name: '美食天地',
                    preview: '美食推荐与烹饪技巧，尽享味蕾盛宴...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '教育资讯',
                    target: 'ture',
                    name: '教育资讯',
                    preview: '教育政策与学校新闻，关注孩子成长...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '房产动态',
                    target: 'ture',
                    name: '房产动态',
                    preview: '房地产市场动态与房价走势，投资置业...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '科技新品',
                    target: 'ture',
                    name: '科技新品',
                    preview: '科技创新产品发布与评测，科技改变...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '旅游攻略',
                    target: 'ture',
                    name: '旅游攻略',
                    preview: '热门旅游景点推荐与攻略，畅游天下...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '娱乐快报',
                    target: 'ture',
                    name: '娱乐快报',
                    preview: '明星八卦与影视资讯，娱乐无极限...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '职场动态',
                    target: 'ture',
                    name: '职场动态',
                    preview: '职场新闻与就业信息，职业规划必备...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '环保行动',
                    target: 'ture',
                    name: '环保行动',
                    preview: '环保知识与绿色生活倡议，守护地球家...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '社会热点',
                    target: 'ture',
                    name: '社会热点',
                    preview: '社会热点事件与深度解读，关注社会动...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '金融投资',
                    target: 'ture',
                    name: '金融投资',
                    preview: '金融市场动态与投资指南，财富增值之...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '艺术展览',
                    target: 'ture',
                    name: '艺术展览',
                    preview: '艺术展览与作品赏析，感受艺术魅力...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '读书分享',
                    target: 'ture',
                    name: '读书分享',
                    preview: '新书推荐与阅读感悟，启迪心灵之旅...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '电影资讯',
                    target: 'ture',
                    name: '电影资讯',
                    preview: '最新电影资讯与影评分析，观影必备参...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '游戏世界',
                    target: 'ture',
                    name: '游戏世界',
                    preview: '游戏更新与玩家交流，游戏乐趣无穷...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '汽车资讯',
                    target: 'ture',
                    name: '汽车资讯',
                    preview: '汽车市场动态与车型介绍，驾驭未来出...'
                },
                {
                    type: 'broadside',
                    broadsideCSS: 'broadside',
                    subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
                    subscription_data_img: 'imageFile/img_19.png',
                    subscription_data_representative_img: 'imageFile/img_20.png',
                    subscription_data_name: '汽车资讯',
                    target: 'ture',
                    name: '汽车资讯',
                    preview: '汽车市场动态与车型介绍，驾驭未来出...'
                },
            ],
            target_item:
                '',
            show_title: '',
            cycle_index: 5,
            cycle_index2: 3,
            cycle_index3: 9,
            kuromi: [
                {
                    type: 'object',
                    messageText: '我是kuromi，可以跟你随时聊天喔',
                    headImage: 'imageFile/img_24.png',
                    div1Class: 'objectCSS',
                    imgClass: 'object_head_image',
                    spanClass: 'messageBoxCss',
                    span2Class: 'messageCss',
                    timestamp: new Date().toLocaleString()
                },

            ], my_melo: [
               {
                    type: 'object',
                    messageText: '我是my_melo，我可以随时使用英语跟你交流，以增强你的英语交流能力，帮你早日过四六级',
                    headImage: 'imageFile/img_25.png',
                    div1Class: 'objectCSS',
                    imgClass: 'object_head_image',
                    spanClass: 'messageBoxCss',
                    span2Class: 'messageCss',
                    timestamp: new Date().toLocaleString()
                },

            ], cherries: [
                {
                    type: 'object',
                    messageText: '我是喵喵翻译家，可以为您提供实时在线翻译',
                    headImage: 'imageFile/img.png',
                    div1Class: 'objectCSS',
                    imgClass: 'object_head_image',
                    spanClass: 'messageBoxCss',
                    span2Class: 'messageCss',
                    timestamp: new Date().toLocaleString()
                },
            ],
            messageTarget: '',
            inputMessage: '',
            foldText: '▼', RightFoldText: '◀',
            inputArea: 'inputArea',
            broadsideRightCSS: 'broadsideRight',
            empty: 'MessageNoEmpty',
            originLanguage: 'zh-CHS',
            targetLanguage: 'en',
            selectedLanguage: 'zh-CHS,en'
        },
        watch: {
            selectedLanguage: function (newVal) {
                var languages = newVal.split(",");
                this.originLanguage = languages[0];
                this.targetLanguage = languages[1];
            }
        },
        computed: {},
        methods: {
            my_melo: this.my_melo, kuromi: this.kuromi, cherries: this.cherries, inputMessage: this.inputMessage,
            target_item: this.target_item, foldText: this.foldText, broadsideRightCSS: this.broadsideRightCSS,
            originLanguage: this.originLanguage, targetLanguage: this.targetLanguage,
            sendMessage(name) {
                if (this.inputMessage !== '' && this.inputMessage !== null) {
                    name.push({
                        type: 'oneself',
                        messageText: this.inputMessage,
                        headImage: 'imageFile/img.png',
                        div1Class: 'replyCSS',
                        imgClass: 'head_image',
                        spanClass: 'reply_messageBoxCss',
                        span2Class: 'reply_messageCss',
                        timestamp: new Date().toLocaleString()
                    });
                    this.replySendMessage(name)
                    this.target_item.preview = name[name.length - 1].messageText;
                    this.inputMessage = '';
                } else if (this.inputMessage === '' || this.inputMessage === null) {
                    this.empty = 'MessageEmpty';
                    setTimeout(() => {
                        this.empty = 'MessageNoEmpty'
                    }, 2000);
                }
            }, replySendMessage(name) {
                if (this.inputMessage !== '' && this.inputMessage !== null && this.target_item.name === '酷洛米') {
                    const prompt = this.inputMessage;
                    console.log(this.inputMessage)
                    console.log("a")
                    fetch("/test/vivogpt?prompt=" + encodeURIComponent(prompt))
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('网络响应异常');
                            }
                            return response.json();
                        })
                        .then(data => {
                            name.push({
                                type: 'object',
                                messageText: data.data.content,
                                headImage: name[0].headImage,
                                div1Class: 'objectCSS',
                                imgClass: 'object_head_image',
                                spanClass: 'messageBoxCss',
                                span2Class: 'messageCss',
                                timestamp: new Date().toLocaleString()
                            });
                            this.target_item.preview = this.messages[this.messages.length - 1].messageText;
                            this.inputMessage = '';
                        })
                        .catch(error => {
                            console.error('错误:', error);
                        });
                    console.log(name)
                } else if (this.inputMessage !== '' && this.inputMessage !== null && this.target_item.name === '美乐蒂') {
                    console.log(this.inputMessage)
                    fetch('/test/vivogpt?prompt=' + encodeURIComponent(this.inputMessage),)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('网络响应异常');
                            }
                            return response.json();
                        }).then(data => {
                        this.translation(name, data.data.content)
                        name.push({
                            type: 'object',
                            messageText: data.data.content,
                            headImage: name[0].headImage,
                            div1Class: 'objectCSS',
                            imgClass: 'object_head_image',
                            spanClass: 'messageBoxCss',
                            span2Class: 'messageCss',
                            timestamp: new Date().toLocaleString()
                        });
                        this.target_item.preview = this.messages[this.messages.length - 1].messageText;
                        this.inputMessage = '';
                    })
                        .catch(error => {
                            console.error('错误:', error);
                        });
                } else if (this.inputMessage !== '' && this.inputMessage !== null && this.target_item.name === '樱桃') {
                    this.translationAuto(name, this.inputMessage)
                }
            },
            translationAuto(target, item) {
                console.log(item)
                console.log(this.originLanguage)
                console.log(this.targetLanguage)

                fetch('/test/translationAuto?prompt=' + encodeURIComponent(item) + "&origin=" + this.originLanguage + "&target=" + this.targetLanguage,)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应异常');
                        }
                        return response.json();
                    }).then(data => {
                    target.push({
                        type: 'object',
                        messageText: data.data.translation,
                        headImage: target[0].headImage,
                        div1Class: 'objectCSS',
                        imgClass: 'object_head_image',
                        spanClass: 'messageBoxCss',
                        span2Class: 'messageCss',
                        timestamp: new Date().toLocaleString()
                    });
                    this.target_item.preview = this.messages[this.messages.length - 1].messageText;
                    this.inputMessage = '';
                })
                    .catch(error => {
                        console.error('错误:', error);
                    });
            },
            translation(target, item) {
                fetch('/test/translation?prompt=' + encodeURIComponent(item),)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应异常');
                        }
                        return response.json();
                    }).then(data => {
                    target.push({
                        type: 'object',
                        messageText: data.data.translation,
                        headImage: target[0].headImage,
                        div1Class: 'objectCSS',
                        imgClass: 'object_head_image',
                        spanClass: 'messageBoxCss',
                        span2Class: 'messageCss',
                        timestamp: new Date().toLocaleString()
                    });
                    this.target_item.preview = this.messages[this.messages.length - 1].messageText;
                    this.inputMessage = '';
                })
                    .catch(error => {
                        console.error('错误:', error);
                    });
            },


            broadsideRightCSSF() {
                if (this.broadsideRightCSS === 'broadsideRight') {
                    this.RightFoldText = '▶';
                    this.broadsideRightCSS = 'broadsideRight2';

                } else if (this.broadsideRightCSS === 'broadsideRight2') {
                    this.RightFoldText = '◀';
                    this.broadsideRightCSS = 'broadsideRight';

                }
            },
            fold() {
                if (this.foldText === '▼') {
                    this.divForContact = "divForContact2"
                    this.inputArea = 'inputArea2';
                    this.foldText = '▲'
                } else {
                    this.divForContact = "divForContact"
                    this.foldText = '▼';
                    this.inputArea = 'inputArea';
                }
            },
            onclick(target) {
                this['contacts'].forEach(
                    (item) => {
                        if (item === target) {
                            item.contactsCSS = 'onclick1';
                            this.target_item = target;
                            if (item.id === "my_melo") {
                                this.messageTarget = this.my_melo
                            } else if (item.id === "kuromi") {
                                this.messageTarget = this.kuromi
                            } else if (item.id === "cherries") {
                                this.messageTarget = this.cherries
                            }
                            this['show_title'] = item.name
                        } else item.contactsCSS = "broadside";
                    }
                )
                this['broadsideData'].forEach(
                    (item) => {
                        if (item === target) {
                            item.broadsideCSS = 'onclick1';
                            this.target_item = target;
                            this['show_title'] = item.name
                        } else item.broadsideCSS = "broadside";
                    }
                );
            }, messageEvent(event) {
                if (event.key === 'name') {
                    this.name = JSON.parse(event.newValue);
                }
            },

        }
    })
    window.onload = function () {
        setInterval(function scrollToBottom() {
                const element = document.getElementById("scroll"); // 替换成你想要滚动到的元素的ID
                element.scrollTop = element.scrollHeight;
            }, 10
        )
    }
</script>
</html>